mixin display(key)
  if (typeof key != 'undefined')
    if block
      block

mixin block_with(keys)
  if keys
    if block
      block

- var httpReg = new RegExp('http://|https://', 'g')

doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0")
    title= card.name+' | 微名片'
    block styles
      link(rel='stylesheet', href='//cdn.staticfile.org/twitter-bootstrap/3.3.0/css/bootstrap.min.css')
      link(rel='stylesheet', href='//cdn.staticfile.org/font-awesome/4.2.0/css/font-awesome.min.css')
      link(rel='stylesheet', href='/stylesheets/templ2.css')
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  body
    block content
      - var avatar = card.avatar.source ? "/uploads/avatar/" + card.avatar.source : "http://lorempixel.com/140/140/city";
      //- .top_bg(style='background-image: url(#{avatar});')
      .top_bg.blur(style='background-image: url(#{avatar}); opacity: .6;')
      //- .top_bg.blur(style="background-image: url(http://lorempixel.com/640/480/nature); opacity: 0;")
      .container-fluid.head
        .row
          .head.col-lg-12

            img.avatar.img-circle.img-thumbnail.center-block(src=avatar, style="width: 120px; height: 120px;")
          .name.col-xs-12
            h2.text-center
              strong= card.name
                if card.position
                  span.space
                  span.small= card.position
          .com.col-xs-12
            h4.text-center
              span= card.company
        //- .company.row


      .container-fluid
        .info.row.bg-white
          +display(card.mobile)
            .contact.col-xs-6
              p
                i.glyphicon.glyphicon-phone
                span= card.mobile
          //- +display(card.mobile)
          +display(card.phone)
            .contact.col-xs-6
              p
                i.fa.fa-phone.fa-fw
                span= card.phone

          +display(card.email)
            .contact.col-xs-12
              p.text-nowrap
                i.fa.fa-fw.fa-envelope
                span= card.email

          +display(card.site)
            .contact.col-xs-12
              p.text-nowrap
                i.fa.fa-fw.fa-globe.text-primary
                a(href=card.site): span= card.site.replace(httpReg, '')

          +display(card.address)
            .contact.col-xs-12
              address
                i.fa.fa-fw.fa-map-marker.text-danger
                span= card.address

      .container-fluid
        .info.row.bg-white
          if card.qq
            .contact.col-xs-6
              p
                i.fa.fa-fw.fa-qq.text-info
                span= card.qq
          if card.weixin
            .contact.col-xs-6
              p
                i.fa.fa-weixin.fa-fw.text-success
                span= card.weixin
          if card.weibo
            .contact.col-xs-6
              p
                i.fa.fa-fw.fa-weibo.text-danger
                span= card.weibo

      if card.bio
        .container-fluid
          .words.row.bg-white
            .col-xs-12
              p.text-justify(style="line-height: 2em")
                i.text-muted.fa.fa-quote-left
                |  #{card.bio}

      if (card.address && card.location.length)
        - var point = card.location
        - var marker = {lng: point[0], lat: point[1]};
        - var marker_img = marker.lng+','+marker.lat;
        - var marker_link = marker.lat+','+marker.lng;
        - var labels = card.company || '我的位置';
        - var labelStyle = '&labels='+marker_img+'&labelStyles='+labels+',0,14,0xff0000,0xffffff,1';
        - var map_img_attrs = {'src': 'http://api.map.baidu.com/staticimage?&scale=2&center='+marker_img+'&markers='+marker_img+'&width=320&height=240&zoom=14&copyright=1&markerStyles=l,,red'};
        - var map_link_attrs = {'href': 'http://api.map.baidu.com/marker?location='+marker_link+'&title='+labels+'&content=地址&output=html&src=vc_client', 'target': '_blank'};

        .container-fluid
          .row
            .map_img.col-md-6.col-sm-12.col-xs-12.col-md-offset-3
              a&attributes(map_link_attrs)
                img.img-responsive.img-thumbnail.img-rounded.center-block.map-img&attributes(map_img_attrs)
            .col-md-6.col-md-offset-3.col-sm-12.col-xs-12
              a.btn.btn-default.center-block(style="margin: 10px 0;")&attributes(map_link_attrs)
                | 地图导航&nbsp;
                i.fa.fa-arrow-circle-right

    footer
      .container
        .row
          p.text-center
            span.text-muted.copyright(style="font-family:arial;") &copy; 2014 HT Labs.
    block scripts
      script(type="text/javascript", src="//cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js")
      script(type="text/javascript", src="//cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.min.js")
      //- script.
        $(window).scroll(function() {
          var opacity = $(document).scrollTop()/100 + .5;
          opacity = opacity <= 1 ? opacity : 1;
          console.log('opacity: '+opacity);
          $('.top_bg.blur').css({opacity: opacity + ''});
        });